import { Row, Col,message } from 'antd';
import React, { useEffect ,useState } from 'react';
import CustomTable from '@/components/Table';
import cardStyles from '../../index.less';
import {getRepaymentDetailsList,orderArrearsSum} from '@/service/order';

function RepaymentDetails(props: any) {
  const {info} = props
  const [orderData,setOrderData] = useState([])
  const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
  const [loading, setLoading] = useState(false)
  const [total, setTotal] = useState(0)
  const [news,setNews] = useState(0) // 新签
  const [old,setOld] = useState(0) // 续签
  const [frontMoney,setFrontMoney] = useState(0) // 定金
  const [cashPledge,setCashPledge] = useState(0) // 押金
  const [periods,setPeriods] = useState(0) // 剩余期数
   // 获取列表信息
   const getList =(page:any,id:any)=>{
    setLoading(true)
    if(id){
      const data = {
        orderCarNo:id,
        current: page?.current,
        size: page?.size,
      }
      getRepaymentDetailsList(data).then((res)=>{
        if(res?.success){
          setOrderData(res?.data?.records)
          setTotal(res?.data?.total)
          setLoading(false)
        }else{
          setLoading(false)
        }
      })
    }
    
  }
  useEffect(()=>{
    if(info?.orderCarNo){
      const data = {
        orderNo:info?.orderCarNo
      }
      orderArrearsSum(data).then((res:any)=>{
          if(res?.success){
            setPeriods(res?.data?.uncollectedStage) 
          }
      })
    } 
  },[info])
  useEffect(() => {
    if(info?.plan?.planFeeList){
      info?.plan?.planFeeList?.forEach((item:any)=>{
        if(item?.feeItemName==='月租金(新签)'){
          setNews(item.feeItemAmount)
        }
        if(item?.feeItemName==='月租金(续签)'){
          setOld(item.feeItemAmount)
        }
        if(item?.feeItemName==='定金'){
          setFrontMoney(item.feeItemAmount)
        }
        if(item?.feeItemName==='押金'){
          setCashPledge(item.feeItemAmount)
        }
      })
    }

    getList(params,info?.orderCarNo)
  }, [info]);
 
  const goodsColumns = [
    {
      title: '期数',
      dataIndex: 'stage',
      align: 'center',
      render: (text: number) =>
        text === 0? <span>--</span>:<span>{text}</span>  
    },
    {
      title: '还款类型',
      dataIndex: 'collectionTypename',
      align: 'center',
    },
    {
      title: '应还日期',
      dataIndex: 'receivableTime',
      align: 'center',
    },
    {
      title: '应还总金额',
      dataIndex: 'receivableAmount',
      align: 'center',
    },
    {
      title: '已还总金额',
      dataIndex: 'receivedAmount',
      align: 'center',
    },
    {
      title: '租金应还',
      dataIndex: '',
      align: 'center',
    },
    {
      title: '服务费应还',
      dataIndex: 'costServiceCharge',
      align: 'center',
    },
    {
      title: '费用减免抵扣',
      dataIndex: 'abatementAmount',
      align: 'center',
    },
    {
      title: '免租金额',
      dataIndex: 'exemptionAmount',
      align: 'center',
    },
    {
      title: '还款状态',
      dataIndex: 'payStatusname',
      align: 'center',
    },
    {
      title: '待还金额',
      dataIndex: 'uncollectedAmount',
      align: 'center',
    },
    {
      title: '逾期天数',
      dataIndex: '',
      align: 'center',
    },
    {
      title: '还款流水',
      dataIndex: 'transactionNo',
      align: 'center',
    },
  ];
  return (
    <div className={cardStyles.card}>
      <p className={cardStyles.title}>还款明细</p>
      <Row gutter={24} className={cardStyles.rows}>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>订单编号：</div>
          <div className={cardStyles.value}>{info?.orderCarNo}</div>
        </Col>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>订单创建时间：</div>
          <div className={cardStyles.value}>{info?.order?.createTime}</div>
        </Col>
      </Row>
      <Row gutter={24} className={cardStyles.rows}>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>客户名称：</div>
          <div className={cardStyles.value}>{info?.order?.lesseeName}</div>
        </Col>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>所属公司：</div>
          <div className={cardStyles.value}>{info?.order?.companyName}</div>
        </Col>
      </Row>
      <Row gutter={24} className={cardStyles.rows}>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>租赁开始日：</div>
          <div className={cardStyles.value}>{info?.startTime}</div>
        </Col>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>租赁结束日：</div>
          <div className={cardStyles.value}>{info?.finishTime}</div>
        </Col>
      </Row>
      <Row gutter={24} className={cardStyles.rows}>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>付款方式：</div>
          <div className={cardStyles.value}>{info?.paymentMethodname}</div>
        </Col>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>付款日：</div>
          <div className={cardStyles.value}>{info?.paymentDay}</div>
        </Col>
      </Row>
      <Row gutter={24} className={cardStyles.rows}>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>总期数：</div>
          <div className={cardStyles.value}>{info?.plan?.tenancy}</div>
        </Col>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>剩余期数：</div>
          <div className={cardStyles.value}>{periods}</div>
        </Col>
      </Row>
      <Row gutter={24} className={cardStyles.rows}>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>押金：</div>
          <div className={cardStyles.value}>{cashPledge}</div>
        </Col>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>定金：</div>
          <div className={cardStyles.value}>{frontMoney}</div>
        </Col>
      </Row>
      <Row gutter={24} className={cardStyles.rows}>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>月租金(新签)：</div>
          <div className={cardStyles.value}>{news}</div>
        </Col>
        <Col span={12} className={cardStyles.col}>
          <div className={cardStyles.label}>月租金(续签)：</div>
          <div className={cardStyles.value}>{old}</div>
        </Col>
      </Row>
      <CustomTable
        params={params}
        columns={goodsColumns}
        pagination
        total={total}
        callback={(pagination: any) => {
          setParams(pagination)
          getList(pagination,info?.orderCarNo)
        }}
        loading={loading}
        dataSource={orderData}
        
      />
    </div>
  );
}

export default RepaymentDetails;
